<template>
    <h2>full</h2>
    <div class="tw:min-h-screen tw:p-8 tw:bg-gray-100 tw:flex tw:gap-10 tw:items-start">
        <div class="tw:relative tw:w-40 tw:h-40 tw:bg-blue-200 tw:border tw:rounded tw:border-slate-300 tw:overflow-visible">
            <div class="tw:absolute tw:w-10 tw:h-10 tw:inset-0 tw:bg-red-500 tw:rounded"></div>
            <div class="tw:absolute tw:left-1 tw:bottom-1 tw:text-xl tw:text-slate-700">inset-0</div>
        </div>

        <div class="tw:relative tw:w-40 tw:h-40 tw:bg-blue-200 tw:border tw:rounded tw:border-slate-300 tw:overflow-visible">
            <div class="tw:absolute tw:w-10 tw:h-10 tw:inset-full tw:bg-green-500 tw:rounded"></div>
            <div class="tw:absolute tw:left-1 tw:bottom-1 tw:text-xl tw:text-slate-700">inset-full</div>
        </div>

        <div class="tw:relative tw:w-40 tw:h-40 tw:bg-blue-200 tw:border tw:rounded tw:border-slate-300 tw:overflow-visible">
            <div class="tw:absolute tw:w-10 tw:h-10 tw:-inset-full tw:bg-purple-500 tw:rounded"></div>
            <div class="tw:absolute tw:left-1 tw:bottom-1 tw:text-xl tw:text-slate-700">-inset-full</div>
        </div>
    </div>

    <h2>基础用法</h2>
    <div class="tw:min-h-100 tw:w-100 tw:p-8 tw:gap-8 tw:bg-gray-100 tw:grid tw:grid-cols-3 tw:grid-rows-3">
        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:rounded">
            <div class="tw:abslute tw:size-16 tw:top-0 tw:left-0 tw:bg-purple-500 tw:rounded tw:flex tw:justify-center tw:items-center">01</div>
        </div>
        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:rounded">
            <div class="tw:absolute tw:h-16 tw:inset-x-0 tw:bg-purple-500 tw:rounded tw:flex tw:justify-center tw:items-center">02</div>
        </div>
        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:rounded">
            <div class="tw:absolute tw:size-16 tw:bg-purple-500 tw:rounded tw:top-0 tw:right-0 tw:flex tw:justify-center tw:items-center">03</div>
        </div>

        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:rounded">
            <div class="tw:absolute tw:w-16 tw:bg-purple-500 tw:rounded tw:inset-y-0 tw:flex tw:justify-center tw:items-center">04</div>
        </div>
        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:rounded">
            <div class="tw:absolute tw:inset-0 tw:bg-purple-500 tw:rounded tw:flex tw:justify-center tw:items-center">05</div>
        </div>
        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:rounded">
            <div class="tw:absolute tw:w-16 tw:bg-purple-500 tw:inset-y-0 tw:right-0 tw:rounded tw:flex tw:justify-center tw:items-center">06</div>
        </div>

        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:rounded">
            <div class="tw:absolute tw:size-16 tw:left-0 tw:bottom-0 tw:bg-purple-500 tw:rounded tw:flex tw:justify-center tw:items-center">07</div>
        </div>
        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:rounded">
            <div class="tw:absolute tw:h-16 tw:inset-x-0 tw:bottom-0 tw:bg-purple-500 tw:rounded tw:flex tw:justify-center tw:items-center">08</div>
        </div>
        <div class="tw:relative tw:size-32 tw:bg-sky-100 tw:round">
            <div class="tw:absolute tw:size-16 tw:right-0 tw:bottom-0 tw:bg-purple-500 tw:rounded tw:flex tw:justify-center tw:items-center">09</div>
        </div>
    </div>
</template>